<template>
	<view class="pagr_art_detail">
		<view class="com_title uni-w690 house_title">{{title}}</view>
		<view class="house">
			<view class="item">
				<view class="text">{{content.predict}}万</view>
				<view class="subText">预估成交价</view>
			</view>
			<view class="item">
				<view class="text">{{content.houseType}}</view>
				<view class="subText">户型</view>
			</view>
			<view class="item">
				<view class="text">{{content.houseArea}}㎡</view>
				<view class="subText">房屋面积</view>
			</view>
		</view>
		<!--end house-->
		<view class="page-section swiper">
			<view class="swiper-container">
				<swiper class="image-container" previous-margin="40rpx" next-margin="40rpx" circular
					@change="swiperChange">
					<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
						v-for="(item, index) in imgList" :key="index">
						<image :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item" lazy-load
							:style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--end swiper-->
		<view class="info">
			<view class="title com_title">基本信息</view>
			<view class="trait clearfix">
				<text class="item" v-for="item in trait" :key="item">{{item}}</text>
			</view>
			<view class="clearfix wrap">
				<view class="item">
					<text class="name">市场价</text>
					<text class="text">{{content.housePrice}}万</text>
				</view>
				<view class="item">
					<text class="name">起拍价</text>
					<text class="text">{{content.origin}}万</text>
				</view>
				<view class="item full">
					<text class="name">类型</text>
					<text class="text">{{content.houseType}}</text>
				</view>
				<view class="item">
					<text class="name">装修</text>
					<text class="text">{{content.decorate}}</text>
				</view>
				<view class="item">
					<text class="name">年代</text>
					<text class="text">{{content.age}}年</text>
				</view>
				<view class="item full">
					<text class="name">预算</text>
					<text class="text">{{content.budget}}</text>
				</view>
				<view class="item full">
					<text class="name">位置</text>
					<text class="text">{{content.location}}</text>
				</view>
			</view>
		</view>
		<!--end infor-->
		<view class="info">
			<view class="title com_title">核心卖点</view>
			<view class="trait clearfix">
				<text class="item" v-for="item in merit" :key="item">{{item}}</text>
			</view>
			<view class="des">
				<text class="text">{{content.brief}}</text>
				<!-- <textarea class="text" v-model="content.brief" disabled auto-height></textarea> -->
			</view>
		</view>
		<!--end infor-->
		<view class="info">
			<view class="title com_title">地理位置</view>
			<map v-show="isShowMap" class="map" :latitude="content.la" :longitude="content.lo" :markers="markers"></map>
		</view>
		<view class="info clearfix">
			<view class="te_title"><text class="red">*</text>温馨提示</view>
			<view class="des">
				<textarea class="text" v-model="content.hint" disabled auto-height></textarea>
			</view>
			<view class="mission">
				<text class="name">佣金:</text>
				<text>{{content.brokerage}}</text>
			</view>
		</view>
		<!--end infor-->
		<view class="bottom flex-space">
			<button class="share-btn" @click="shareBtn">分享好友</button>
			<button class="share-btn yx-btn" :class="{'apply-btn-active':isApply}" @click="showPop">意向了解
			</button>
		</view>

		<uni-popup class="popup-box" ref="popup" type="bottom" @change="popChange" :mask-click="false">
			<view class="popup">
				<view class="popTop">
					<button class="pop_close" @click="closePop">
						<uni-icons type="closeempty" size="32"></uni-icons>
					</button>
					<text class="title com_title">申请信息</text>
				</view>
				<view class="input_wrap">
					<input class="input" v-model="parmas.basicBorrowerName" placeholder="请输入购房人姓名" />
				</view>
				<view class="input_wrap">
					<input class="input" v-model="parmas.basicBorrowerPhone" placeholder="请输入联系电话" />
				</view>
				<wyb-button class="btn" :ripple="true" type="filled" color="#585cf7" :radius="radius" width="100%"
					height="88rpx" font-size="32rpx" :disabled="isApply" @click="apply">提交</wyb-button>
			</view>
		</uni-popup>
		<uni-popup ref="sharePop" type="bottom" :mask-click="false">
			<!-- 		<view class="popup"> -->
			<view class="layer-box">
				<view class="share-title">分享给好友</view>
				<view class="share-btns">
					<button class="btn-con" @click="sharefriend">
						<image src='../../static/image/page/weixin@2x.png' class="weixin"></image>
						<text class="wx-hy">微信好友</text>
					</button>
					<button @click="goPosters" class="btn-con">
						<image src="../../static/image/page/pengyouquan@2x.png" class="weixin"></image>
						<text class="wx-hy">图文分享</text>
					</button>
				</view>
				<button class="apply-btn layer-btn cancel-btn" @click="cancel">取消</button>
			</view>
			<!-- </view> -->
		</uni-popup>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	export default {
		data() {
			return {
				imgList: [],
				title: "",
				content: {},
				trait: [],
				merit: [],
				radius: ["100px"],
				currentIndex: 0,
				dontFirstAnimation: true,
				parmas: {
					basicBorrowerName: "",
					basicBorrowerPhone: "",
					cid: '',
					productId: '',
				},
				isApply: false,
				sharwShow: false, //分享海报弹出层
				markers: [],
				detail: {},
				isShowMap:true,//是否显示地图
				logInfo:{},
			}
		},
		onLoad(parmas) {
			this.getArtDetail(parmas.id)
			this.logInfo=uni.getStorageSync('userInfo') || {};

		},
		methods: {
			//提交申请
			apply() {
				let that = this;
				//校验格式
				let checkRes = graceChecker.check(this.parmas, formRuleConfig.orderFapai);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				this.$api.newOrder(this.parmas).then(() => {
					uni.showToast({
						title: "申请成功",
						icon: "success"
					});
					that.closePop();
					that.isApply = true;
				})
			},
			showPop() {
				if (!this.isApply) {
					this.$refs.popup.open();
					this.isShowMap = false;
				}
			},
			closePop() {
				this.$refs.popup.close()
				this.isShowMap = true;
			},
			popChange(mgs) {
				if (!mgs.show) {
					this.parmas.basicBorrowerName = "";
					this.parmas.basicBorrowerPhone = ""
				}
			},
			//推广图移动
			swiperChange(e) {
				this.dontFirstAnimation = false
				this.currentIndex = e.detail.current
			},
			//获取详情
			async getArtDetail(id) {
				let resData = await this.$api.getHousingDetail(id);
				console.log(resData);
				let data = resData.data.data;
				this.title = data.title;
				this.content = data.tbHouse || {};
				this.imgList = data.images;
				this.trait = data.tbHouse.trait ? this.foo3(data.tbHouse.trait) : [];
				this.merit = data.tbHouse.merit ? this.foo3(data.tbHouse.merit) : [];
				this.detail = data;
				console.log(this.merit)
				this.isApply = data.isApply;
				this.parmas.productId = data.productId;
				this.parmas.cid = data.id
				this.markers = [{
					id: 1,
					latitude: this.content.la,
					longitude: this.content.lo,

				}]

			},
			//分割字符串
			foo3(str) {
				let temp = str.split(/[\n\s+,，；;]/g);
				for (let i = 0; i < temp.length; i++) {
					if (temp[i] == "") {
						temp.splice(i, 1);
						i--;
					}
				}
				return temp;
			},
			//点击打开分享弹层
			shareBtn() {
				this.$refs.sharePop.open();
				this.isShowMap=false;
			},
			//关闭弹层
			cancel() {
				this.$refs.sharePop.close();
				this.isShowMap=true;
			},
			//分享
			sharefriend() {
				uni.share({
					provider: "weixin",
					type: 5,
					title: this.title,
					imageUrl: this.detail.wxCoverImg ,
					miniProgram:{
						id:'gh_b0987df2e0e1',
						path:`/pages/housing-resources/detail/index?id=${this.detail.id}&inviterId=${this.logInfo.id}`,
						type:0,
						webUrl: 'https://uniapp.dcloud.io',
					},
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//海报分享
			goPosters() {
				console.log(111)
				uni.navigateTo({
					url: `/pages/detail-poster-shaer/index?detail=${JSON.stringify(this.detail)}`
				})
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
		box-sizing: border-box;
		padding-bottom: 10rpx;
	}
</style>
<style lang="scss" scoped>
	.house_title {
		margin-top: 30rpx;
	}

	.house {
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text {
			font-size: 42rpx;
			color: #FC4073;
		}

		.subText {
			color: #999999;
		}
	}

	.info {
		padding: 0 30rpx;
		margin: 20rpx 0;

		.title {
			padding-left: 30rpx;
			position: relative;
		}

		.title:before {
			content: "";
			width: 8rpx;
			height: 28rpx;
			background: $dtg-color-primary;
			border-radius: 4rpx;
			position: absolute;
			left: 0;
			top: 8rpx
		}

		.trait {
			.item {
				border: 1px solid #999999;
				border-radius: 4rpx;
				font-size: 22rpx;
				padding: 0 8rpx;
				float: left;
				margin: 8rpx 8rpx 8rpx 0;
				color: #333333
			}
		}

		.wrap {
			.item {
				width: 50%;
				float: left;
				min-height: 40rpx;
				padding-left: 100rpx;
				position: relative;
				margin-top: 16rpx;

				.name {
					position: absolute;
					font-size: 28rpx;
					color: #999999;
					top: 0;
					left: 0;
					line-height: 40rpx;
				}
			}

			.full {
				width: 100%;
			}
		}

		.des {
			margin-top: 20rpx;

			.text {
				width: 100%;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.te_title {
			font-size: 32rpx;

			.red {
				color: #FC4073;
				margin-right: 10rpx;
			}
		}

		.mission {
			margin-top: 20rpx;

			.name {
				background: #FC4073;
				display: inline-block;
				color: #fff;
				padding: 0 16rpx;
				margin-right: 20rpx;
			}
		}
	}

	.bottom {
		padding: 30rpx;
		// position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #FFFFFF;
		font-size: 32rpx;
		z-index: 999;
		box-sizing: border-box;
	}

	.share-btn {
		color: #5656E4;
		width: 100%;
		height: 100%;
		border-radius: 40rpx 0 0 40rpx;
		border: 1rpx solid #5656E4;
		border-right: none;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.yx-btn {
		color: #fff;
		background-color: #5656E4;
		border: none;
		border-radius: 0 40rpx 40rpx 0;
	}

	.apply-btn-active {
		background: rgba(88, 92, 247, .5);
	}


	.image-container {
		width: 750rpx;
		height: 400rpx;

		.item-img {
			width: 100%;
			height: 400rpx;
			border-radius: 14rpx;
			animation: to-big .3s;
		}

		.swiper-item {
			width: 100%;
			height: 400rpx;
			display: flex;
			justify-content: center;
			position: relative;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.item-img-side {
			width: 100%;
			height: 380rpx;
			border-radius: 14rpx;
			animation: to-mini .3s;
		}

		.swiper-item-side {
			position: relative;
			width: 100%;
			height: 380rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.uni_icon {
			font-size: 24px;
			position: absolute;
			z-index: 999;
			top: 20rpx;
			right: 20rpx;
		}

		.item_icon {
			color: red;
		}

		.item_side_icon {
			top: 60rpx;
			right: 40rpx;
			color: #FFFFFF;
		}

		@keyframes to-mini {
			from {
				height: 400rpx;
			}

			to {
				height: 380rpx;
			}
		}

		@keyframes to-big {
			from {
				height: 380rpx;
			}

			to {
				height: 400rpx;
			}
		}
	}

	.popup {
		width: 100%;
		height: 45vh;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 30rpx;

		.popTop {
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #EEEEEE;
			padding-top: 30rpx;

			.pop_close {
				width: 64rpx;
				height: 64rpx;
				background: #fff;
				color: #666666;
				padding: unset;
				line-height: 64rpx;
			}

			.title {
				flex: 1;
				text-align: center;
				margin-left: -36rpx;
			}
		}

		.input_wrap {
			height: 98rpx;
			width: 100%;
			margin: 40rpx 0;

			.input {
				height: 100%;
				border-radius: 40rpx;
				background: #F8F8F8;
				padding-left: 40rpx;
				color: #333333;
			}
		}
	}

	.kefu-icone {
		min-width: 42rpx;
		min-height: 42rpx;
		max-width: 42rpx;
		max-height: 42rpx;
		margin-right: 30rpx;
	}

	.map {
		width: 100%;
		margin-top: 20rpx;
		z-index: 1 !important;
		position: relative;
	}

	/* 分享弹层 */
	.layer-box {
		padding: 60rpx 30rpx 80rpx;
		background-color: #fff;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		z-index: 9999;

	}

	.share-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 60rpx;
	}

	.share-btns {
		display: flex;
	}

	.weixin {
		width: 76rpx;
		height: 76rpx;
	}

	.wx-hy {
		font-size: 28rpx;
	}

	.btn-con {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 60rpx 68rpx 0;
		background: none;
	}

	.cancel-btn {
		border-radius: 50rpx;
		background: #F8F8F8;
		height: 98rpx;
		line-height: 98rpx;
		font-size: 36rpx;
		color: #333333;
	}
</style>
<style>
	.popup-box {
		position: relative;
		z-index: 999;
	}

	.uni-transition {
		z-index: 99;
	}
</style>
